/*
 * @Author: jiu yin
 * @Date: 2024-06-20 19:10:12
 * @LastEditTime: 2024-06-24 14:10:45
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\map_management\component\AddShop.tsx
 * jiu
 */
import { useState, useEffect } from "react";
import Modal_edit from "@/comment/modal_edit";
import { Button, Pagination, message } from "antd";
import Upload_style from "@/comment/upload_style";
import FormTwo from "@/comment/FormTwo";
import { create_atlas } from "@/api/home";

export default function AddShop(props: any) {
	let { isModalOpen, reload } = props;

	// layout或者style 配置项
	let formTwoProps = {
		formItemLayout: {
			labelCol: {
				span: 10,
			},
		},
		layout: "vertical",
		style: { width: "100%" },
	};

	//初始data
	let dataFormRoleInfo = {
		version: "",
		file_url: "",
		name: "",
		file_name: "",
		file_format: "",
		size: "",
		content: "",
	};
	let [formData, setFormData] = useState(dataFormRoleInfo);

	const onFinish = async (values: any) => {
		console.log("表单", values);
		let file = { ...values?.file_url.file.response.data };
		let params={ ...values, ...file }
		delete params.file_url;
		await create_atlas(params);
		message.success("添加成功");
		isModalOpen[1](false);
		reload();
	};

	let [formList, setFormList] = useState([
		{
			type: "upload_card",
			label: "上传地图:",
			name: "file_url",
			listType: "picture",
			action_url: "/api/v1/media/save_file_sharding",
			count: 1,
			accept: ".zip,.rar,.7z",
			fileSize: 1024 * 1024 * 5, //M
			rules: [{ required: true, message: "请上传地图!" }],
			uploadButton: (
				<Upload_style
					style={{ width: "540px", height: "150px" }}
					str={{
						p2: "上传地图压缩文件",
						p3: "地图文件包含 0.finchz/aruco.json/origin_offset.txt共3个文件，请打包为一个 ZIP压缩包上传单个文件大小不超过 5GB",
					}}
				/>
			),
		},
		{
			type: "input",
			label: "请输入地图名称",
			name: "name",
			placeholder: "请输入地图名称",
			rules: [{ required: true, message: "请输入地图名称!" }],
		},
		{
			type: "input",
			label: "请输入地图版本号",
			name: "version",
			placeholder: "请输入地图版本号",
			rules: [{ required: true, message: "请输入地图版本号!" }],
		},
		{
			type: "textArea",
			label: "地图描述",
			name: "content",
			placeholder: "请输入地图描述",
			rules: [{ required: true, message: "请输入地图描述!" }],
		},
	]);

	return (
		<Modal_edit title={"添加地图"} width={600} isModalOpen={isModalOpen}>
			<section className="mt-20px">
				<FormTwo
					formList={[formList, setFormList]}
					onFinish={onFinish}
					cancel={() => isModalOpen[1](false)}
					formTwoProps={formTwoProps}
					formData={[formData, setFormData, dataFormRoleInfo]}></FormTwo>
			</section>
		</Modal_edit>
	);
}
